<!--
 * @Author: 程家兴
 * @Date: 2022-08-15 08:41:08
 * @LastEditors: 程家兴
 * @LastEditTime: 2022-08-20 14:43:20
 * @FilePath: \bdh-pumping-web\src\views\components\intelligentIrrigation\zmDialog.vue
 * @Description: 
-->
<template>
  <div class="zmDialog">
    <el-dialog
      title="告警记录"
      :center="dialogTitleAlign"
      :visible.sync="visible"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :show-close="showClose"
    >
      <div class="dialogClose" @click="dialogCloseClick"></div>
      <div>
        <div class="module_search">
          <!-- <div class="module_search_word">采集时间：</div>
          <el-date-picker v-model="startDate" type="date"> </el-date-picker>
          <div class="module_search_word" :style="{ margin: '0 15px' }">
            至
          </div>
          <el-date-picker v-model="endDate" type="date"> </el-date-picker>
          <div :style="{ marginLeft: '18px' }">
            <el-button type="primary" icon="el-icon-search">查询</el-button>
          </div> -->
        </div>
        <div class="module_table">
          <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column prop="strobeName" label="水闸名称"> </el-table-column>
            <el-table-column prop="servicingCause" label="异常信息"> </el-table-column>
            <el-table-column prop="discoverer" label="发现人"> </el-table-column>
            <el-table-column prop="discoveryTime" label="发现时间"> </el-table-column>
   
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            @prev-click="prevClick"
            @next-click="nextClick"
            background
            :page-size="10"
            layout=" prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
          <div class="pagination_total">
            共
            <span class="pagination_total_num">{{ total }}</span>
            条
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  components: {},
  props: ['visible', 'type'],
  data() {
    return {
      // 弹窗配置
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false,
      dialogTitleAlign: true,
      // 闸门弹出框数据
      // 表格查询起止时间
      startDate: '',
      endDate: '',
      currentPage: 1,
      tableData: [],
      total: 0,

      param: {},
    }
  },
  computed: {},

  methods: {
    prevClick(val) {
      this.getAlarmManagementList(val - 1)
    },
    nextClick(val) {
      this.getAlarmManagementList(val + 1)
    },
    getAlarmManagementList(pageNo) {
      let result = {}
      getAction('/youyi/alarmManagement/list', { pageNo: pageNo }).then((res) => {
        result = res.result

        console.log(res)
        this.tableData = result.records
        this.total = result.total
      })
    },
    dialogCloseClick() {
      this.$emit('close')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.getAlarmManagementList(val)
    },
  },
  // 监听父组件传递的参数，更改当前展示的数据

  created() {
    this.getAlarmManagementList()
  },
}
</script>

<style lang="less" scoped>
.zmDialog {
  position: relative;
  .dialogClose {
    width: 29px;
    height: 29px;
    background: url('../../../assets/images/intelligentIrrigation/dialogClose.png');
    background-size: 100% 100%;
    position: absolute;
    right: 27px;
    top: 30px;
    cursor: pointer;
  }
  .module_search {
    position: absolute;
    top: 111px;
    left: 25px;
    display: flex;
    .module_search_word {
      font-size: 18px;
      font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
      font-weight: 400;
      color: #ffffff;
      line-height: 35px;
    }
  }
  .module_table {
    position: absolute;
    top: 165px;
    left: 23px;
    width: 1142px;
    .pagination_total {
      position: absolute;
      bottom: 9px;
      left: 630px;
      font-size: 18px;
      font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
      font-weight: 400;
      text-align: left;
      color: #ffffff;
      line-height: 14px;
      .pagination_total_num {
        font-size: 18px;
        font-family: FZLanTingHei-DB-GBK, FZLanTingHei-DB-GBK-Regular;
        font-weight: 400;
        text-align: left;
        color: #00fbff;
        line-height: 14px;
      }
    }
  }
}
</style>
<style lang="less">
.zmDialog .el-dialog {
  width: 1192px;
  height: 755px;
  background: rgba(1, 31, 86, 0.92);
  border: 1px solid #00fbff;
}
.zmDialog .el-dialog__header {
  background: transparent;
  border-bottom: 1px solid #00395f;
  height: 80px;
  .el-dialog__title {
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(0deg, #1765ff 0%, #4a87ff 0%, #49d9fe 55%, #8fefff 80%);
    font-size: 30px;
    font-family: Microsoft YaHei, Microsoft YaHei-Bold;
    font-weight: 700;
    text-align: center;
    line-height: 45px;
  }
  .el-dialog__headerbtn {
    display: none;
  }
}
.module_search .el-input--medium .el-input__inner {
  height: 35px !important;
  line-height: 35px !important;
  border: 1px solid #00fbff !important;
}
.module_search .el-input__prefix {
  color: #00fbff;
}
.module_table .el-table th.el-table__cell.is-leaf,
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background: #001f4f;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: center;
  color: #eef8ff;
  line-height: 48px;
  border-right: none;
  border-bottom-color: #5176a0;
}
.module_table .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #07376a;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: center;
  color: #eef8ff;
  line-height: 48px;
  border-bottom-color: #5176a0;
  :hover {
  }
}
.module_table .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: #07376a;
}
.module_table .el-table--border {
  border: 1px solid #00fbff;
}
.module_table .el-table::before {
  height: 0;
}
.module_table .el-table thead {
  color: #fff;
}
.module_table .el-table__body tr.current-row > td {
  background: #07376a;
}
.module_table .el-pagination {
  text-align: right;
  margin-top: 25px;
  .btn-prev,
  .el-pager li,
  .btn-next {
    color: #b9bed6;
    background: rgba(239, 241, 244, 0.2);
  }
  .el-pager li.active {
    background: #2f98fa;
  }
  .el-pager li {
    color: #b9bed6;
    background: rgba(239, 241, 244, 0.2);
  }
  .el-pagination__sizes .el-input .el-input__inner {
    color: #b9bed6;
    background: rgba(239, 241, 244, 0.2);
    border: none;
  }
  .el-input--medium .el-input__inner {
    height: 26px;
    line-height: 26px;
    color: #b9bed6;
    background: rgba(239, 241, 244, 0.2);
  }
  .el-pagination__jump {
    font-size: 16px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: left;
    color: #b9bed6;
  }
}
</style>
